<template>
  <view class="index_block">
    <!-- 标题 -->
    <view class="top_block">
      <text style="font-size: 32rpx; color: #ffffff">计划行</text>
    </view>
    <!-- 顶部 -->
    <view class="plan_block">
      <view class="plan_blockTip">
        <view class="plan_blockLeft">
          <text style="font-size: 32rpx; color: #000000">计划列表</text>
        </view>
        <view class="plan_blockRight">
          <view class="plan_btn" @click="add">
            添加计划
          </view>
        </view>
      </view>
    </view>
    <!-- 列表 -->
    <view class="list_block" v-if="hasLogin">
      <uni-list>
        <uni-list-item
          v-for="(item, index) in planData"
          :key="index"
          showArrow
          :title="`计划${index + 1}`"
          :to="`/pages/custom/plan_details?details=${JSON.stringify(
            item
          )}&dataIndex=${index}`"
          style="font-size: 32rpx"
          link="navigateTo"
        >
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script>
export default {
  onShow() {
    if (!this.hasLogin) {
      uni.showModal({
        title: "不可查看计划内容",
        content: "登录才能查看计划内容",
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: "/pages/login/login",
            });
          }else if(res.cancel) {
						uni.switchTab({
							url: "/pages/myuser/index",
						})
					}
        },
      });
    }
  },
  data() {
    return {};
  },
  computed: {
    planData() {
      return this.$store.state.planDetails;
    },
		hasLogin() {
			return this.$store.state.hasLogin;
		}
  },
  methods: {
    add() {
      uni.navigateTo({
        url: "/pages/custom/add",
      });
    },
  },
};
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}
.index_block {
  width: 100%;
  min-height: 2200rpx;
  background-color: #f2f2f2;
}

.top_block {
  width: 100%;
  height: 70rpx;
  background-color: #CBCACA;
  line-height: 70rpx;
  text-align: center;
}

.plan_block {
  width: 100%;
	position: sticky;
	top: 88rpx;
	// #ifndef H5
	top: 0;
	// #endif
  background-color: #f0f8ff;
	border: 1px solid #F2F2F2;
	box-sizing: border-box;
}

.plan_block .plan_blockTip {
  width: 100%;
  height: 74rpx;
  display: flex;
  padding-bottom: 10rpx;
  box-sizing: border-box;
  justify-content: space-around;
}

.plan_block .plan_blockTip .plan_blockLeft {
  width: 160rpx;
  height: 74rpx;
  line-height: 74rpx;
}

.plan_btn {
	height: 74rpx;
	line-height: 74rpx;
	font-size: 32rpx; 
	color: blue;
}

.uni-list-item {
  width: 100%;
  background-color: #f2f2f2 !important;
}

.uni-list-item__container {
  line-height: 60rpx;
}

.uni-list-item__content-title {
  font-size: 32rpx !important;
}
</style>
